import React, { useEffect, useState } from 'react';
import { CommonStyle } from '../../../../../common/commonStyle.ts';
import { Image } from 'react-native';
import Swiper from 'react-native-swiper';
import { Text, View } from 'native-base';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import EventCollection from '../../eventCollection.ts';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../../../../../redux/store.ts';
import { updateBtnInformation } from '../../../../../redux/reducers/app.ts';

interface IRecommendTemplateProps {
  data: IBtnFormatsList[][];
}
const RecommendTemplate: React.FC<IRecommendTemplateProps> = (props) => {
  const [list, setList] = useState<IBtnFormatsList[][]>([]);
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    setList(props.data);
  }, [props.data]);

  const handlePress = (item: IBtnFormatsList) => {
    EventCollection.onPress(item, 3);
    dispatch(updateBtnInformation({ ...item, moduleType: 3 }));
  };

  return (
    <Swiper removeClippedSubviews={true} loop={false} loadMinimal height={90} showsButtons={false} activeDotColor={CommonStyle.mainColor} paginationStyle={{ bottom: 10 }}>
      {list.map((i, index) => {
        return (
          <View flexDirection={'row'} flex={1} paddingX={1} paddingY={2} key={index}>
            {i.map((item, _index) => {
              return (
                <Touchable key={_index} style={{ flex: 1, marginHorizontal: 4, height: '100%' }} onPress={() => handlePress(item)} onLongPress={() => EventCollection.onLongPress(item)} delayLongPress={500}>
                  <Image style={{ height: '100%' }} source={{ uri: item.value }} resizeMode={'contain'} />
                </Touchable>
              );
            })}
          </View>
        );
      })}
    </Swiper>
  );
};

export default RecommendTemplate;
